<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>条件渲染</title>
    <script src="./js/babel.min.js"></script>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <style>
      .ad{
        padding: 40px;
        background: #cae;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      //声明一个变量
      let isVip = true;//标识当前用户是否为 vip 用户

      //创建虚拟 DOM 对象   2 && 3
      // 逻辑与   ✅
      // let vdom = <div>
      //     {!isVip && <div className="ad">又上新皮肤啦~~~ 打折中...</div>}
      //   </div>;
      
      //三元运算符 ✅✅
      // let vdom = <div>
      //   {isVip ? null : <div className="ad">又上新皮肤啦~~~ 打折中...</div>}
      // </div>;

      //函数调用
      function getAd(){
        if(isVip){
          return null;
        }else{
          return <div className="ad">又上新皮肤啦~~~ 打折中...</div>;
        }
      }
      let vdom = <div>
        {getAd()}
      </div>;

      //渲染   代码片段  dq =>  document.querySelector('#root');
      ReactDOM.render(vdom, document.querySelector('#root'));

    </script>
  </body>
</html>
